<template>
    <div class="print-detail">
        <a-modal width="900px" :visible="visible" :title="modalOption.title" :dialog-style="{ top: '20px' }"
            @cancel="modalOption.onCancel" class="yuan-modal print-detail-modal" :okText="modalOption.okText"
            :cancelText="modalOption.cancelText" @ok="modalOption.onOk">
            <a-spin tip="Loading..." :spinning="formLoading">
                <a-form-model layout="inline" class="yuan-form" :label-col="{ style: { width: '100px' } }"
                    :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }" ref="form" :model="formData" :rules="rules">
                    <div class="form-panel">
                        <div class="top-select">
                            选择追溯码模板：<a-select v-model="tplType" style="width: 200px">
                                <a-select-option value="jj">精简版</a-select-option>
                                <a-select-option value="xx">详细版</a-select-option>
                            </a-select>
                        </div>
                        <div class="form-panel-title">产品信息</div>
                        <div class="form-panel-box">

                            <div class="printTemplate-box">
                                <div class="content">
                                    <div class="item">
                                        <span class="label">【<span class="label-text">品名</span>】：</span>
                                        <span class="value">{{detailData.varietyName}}</span>
                                    </div>
                                    <div class="item">
                                        <span class="label">【<span class="label-text">药材产地</span>】：</span>
                                        <span class="value">{{detailData.placeOfOrigin}}</span>
                                    </div>
                                    <div class="item">
                                        <span class="label">【<span class="label-text">产品批号</span>】：</span>
                                        <span class="value">{{detailData.productBatch}}</span>
                                    </div>
                                    <div class="item">
                                        <span class="label">【<span class="label-text">生产日期</span>】：</span>
                                        <span class="value">{{format(detailData.productionTime, 'yyyy.MM.dd')}}</span>
                                    </div>
                                    <div class="item">
                                        <span class="label">【<span class="label-text">保质期至</span>】：</span>
                                        <span class="value">{{getExpirationDateTime()}}</span>
                                    </div>
                                    <div class="item">
                                        <span class="label">【<span class="label-text">规格</span>】：</span>
                                        <span class="value">{{detailData.specification}}</span>
                                    </div>
                                    <div class="item">
                                        <span class="label">【<span class="label-text">装量</span>】：</span>
                                        <span class="value">{{detailData.discretion}}</span>
                                    </div>
                                    <div class="item">
                                        <span class="label">【<span class="label-text">贮藏</span>】：</span>
                                        <span class="value">{{detailData.stockpileCondition}}</span>
                                    </div>
                                    <div class="item">
                                        <span class="label">【<span class="label-text">执行标准</span>】：</span>
                                        <span class="value">{{detailData.executiveStandard}}</span>
                                    </div>
                                </div>
                                <div class="QRCode">
                                    <img :src="detailData.tidyQrCode" v-if="tplType === 'jj'" />
                                    <img :src="detailData.inDetailQrCode" v-else />
                                    <!-- <h3 style="text-align: center">232324232</h3> -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-panel">
                        <div class="form-panel-title">打印发送</div>
                        <div class="form-panel-box">
                            <a-form-model-item class="yuan-form-item" label="申请码数" prop="printNum">
                                <a-input class="yuan-form-input" v-model="formData.printNum" placeholder="请输入"></a-input>
                                <span class="bottm-tips">未打印：{{detailData.notPrintNum}}</span>
                                <span class="bottm-tips">已打印：{{detailData.alreadyPrintNum}}</span>
                            </a-form-model-item>
                        </div>
                    </div>
                </a-form-model>
            </a-spin>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import nextApi, { PrintSendDetialRes, ProListRes } from "@/api/nextApi";
import Upload from "@/components/upload.vue";
import { format } from "@/utils";
@Component({
    name: "Detail",
    methods: {format},
    components: { Upload },
})
export default class extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: "" }) infoId!: string;

    @Watch("visible")
    visibleChange() {
        if (this.visible) this.getDetail();
    }
    tplType = 'jj';
    pagination = {
        pageSize: 10,
        current: 1,
        total: 0,
        showTotal: (total: number) => `共${total}条`,
        onChange: this.pageChange,
    };
    columns = [
        {
            align: "center",
            dataIndex: "adjustTime",
            key: "adjustTime",
            title: "打印时间",
        },
        {
            align: "center",
            dataIndex: "practicalYield",
            key: "practicalYield",
            title: "申请码数",
        },
        {
            align: "center",
            dataIndex: "adjustPerson",
            key: "adjustPerson",
            title: "申请人",
        },
        {
            align: "center",
            dataIndex: "adjustPerson1",
            key: "adjustPerson1",
            title: "状态",
        },
    ];
    rules = {
        specificationCode: [{ required: true, message: "请输入申请码数", trigger: "blur" }],
    };
    formData: any = {};
    formLoading = false;
    modalOption = {
        title: "打印详情",
        okText: "提交",
        cancelText: "返回",
        onCancel: this.closeModal,
        onOk: this.modalOk,
    };
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        const data = {
            品名: this.detailData.varietyName,
            药材产地: this.detailData.placeOfOrigin,
            产品批号: this.detailData.productBatch,
            生产日期: format(this.detailData.productionTime, "yyyy.MM.dd"),
            保质期至: this.getExpirationDateTime(),
            规格: this.detailData.specification,
            装量: "每袋装" + this.detailData.discretion,
            贮藏: this.detailData.stockpileCondition,
            executeStandard: this.detailData.executiveStandard,
            barCode: "null", //this.templateInfo.dispenserCode + " 0 " + this.templateInfo.batch,
            breedName: this.detailData.varietyName,
            modal: "null", // this.templateInfo.inventoryType,
            type: "null", // this.templateInfo.inventoryType.substr(0, 3),
            url: "http://sy.xinlvyao.com:10109/zyypScan/index.html?code=",
        };
        const postData = {
            packId: this.infoId,
            printNum: this.formData.printNum,
            content: JSON.stringify(data),
            type:this.tplType
        };
        this.formLoading = true;
        try {
            const res = await nextApi.sendPrint(postData);
            this.$message.success(res.msg);
            this.closeModal();
            this.$emit("resetList");
        } finally {
            this.formLoading = false;
        }
    }
    pageChange() {}

    detailData = {} as PrintSendDetialRes;
    async getDetail() {
        this.formLoading = true;
        try {
            const res = await nextApi.getSendDetail({ id: this.infoId });
            this.detailData = { ...res.data };
        } finally {
            this.formLoading = false;
        }
    }
    getExpirationDateTime() {
        if (!this.detailData.productionTime) return "";
        const productionTime = this.detailData.productionTime;
        let productionArr: string[] = [];
        if (productionTime.indexOf("/") >= 0) {
            productionArr = productionTime.split("/");
        } else if (productionTime.indexOf("-") >= 0) {
            productionArr = productionTime.split("-");
        }
        console.log("productionArr",productionArr)
        const month = Number(this.detailData.expirationDate);
        const addYear = Math.floor(month / 12);


        let originMonth = Number(productionArr[1])
        console.log(originMonth)
        let leftMonth = month % 12;
        console.log(leftMonth,'@@@')
        let addMonth:any = month % 12 === 0 ? originMonth : originMonth+leftMonth;
        console.log(addMonth)

        let saveYearTo = Number(productionArr[0]) + addYear
        console.log("保质期至：",`${saveYearTo}.${addMonth}`)

        if(addMonth >12){
            saveYearTo = saveYearTo+1
            addMonth = addMonth % 12
        }
        addMonth = addMonth <= 10 ? (addMonth == 1 ? addMonth:`0${addMonth-1}`):addMonth-1
        let saveMonthTo:any = addMonth
        let saveDateTo = saveMonthTo === 1 ? saveYearTo-1+'.12':`${saveYearTo}.${saveMonthTo}`
        return saveDateTo;
    }
}
</script>
<style lang="scss">
.print-detail-modal {
    .content {
        background-repeat: no-repeat;
        background-size: 100% 20%;
        background-position: bottom;
        .item {
            display: flex;
            margin-bottom: 10px;
            flex-wrap: wrap;
            align-items: center;
            .label {
                flex-shrink: 0;
                height: 20px;
                overflow: hidden;
                .label-text {
                    display: inline-block;
                    width: 120px;
                    text-align: justify;
                    font-size: 13px;
                    color: #3e3e3e;
                    font-style: normal;
                    line-height: 14px;
                    height: 20px;
                    vertical-align: text-top;
                    transform: translateY(3px);
                }
                .label-text::after {
                    content: "";
                    display: inline-block;
                    width: 100%;
                }
            }
            .value {
                padding: 0 10px;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 13px;
                color: #3e3e3e;
                text-align: left;
                font-style: normal;
            }
        }
    }
    .printTemplate-box {
        display: flex;
        align-items: center;
        .QRCode {
            margin-left: 150px;
            img {
                width: 180px;
            }
        }
    }
    .bottm-tips {
        margin-left: 10px;
    }
    .top-select {
        margin-bottom: 10px;
    }
}
</style>
